<template>
	<view class="page-book-arena">
		<scroll-view class="scroll-content" scroll-x enable-flex >
			<view class="book-date-list">
				<MxDateBtn v-for="date in dateList" :dayObj="date" :active.sync="activeDay" />
			</view>

		</scroll-view>
		<view class="arena-list">
			<view class="arena-item" v-for="arena in list" :key="arena.arena_id">
				<view class="arena-info">
					<view class="arena-name">
						{{arena.name}}
					</view>
					<view class="arena-data">
						{{arena.free_count}}场可约
					</view>
				</view>
				<MxBookBtn @select="toBookDetail(arena.arena_id)" />
			</view>
			<!-- <view class="reach-bottom-tip">
				已经到底啦
			</view> -->
		</view>
		<EmptyData v-if="!hasArean" />
		<hans-tabbar :list="tabBarList" style="position:fixed;bottom:0;width:100%;left:0;right:0;" @tabChange="tabChange" :current="tabCurrent" />
	</view>
</template>

<script>
	import {
		objectToQuerystring
	} from '@/utils/util.js'
	import MxBookBtn from '@/components/book-arena/MxBookBtn.vue'
	import MxDateBtn from '@/components/book-arena/MxDateBtn.vue'
	import arenaMixin from '@/common/mixins/arena.js'
	import EmptyData from '@/components/common/EmptyData.vue'
	import * as arenaApi from '@/api/arena.js'
	import baseMixin from '@/common/mixins/base.js'
	import HansTabbar from '@/components/common/hans-tabbar/hans-tabbar.vue'
	export default {
		mixins: [baseMixin,arenaMixin],
		components: {
			MxBookBtn,
			MxDateBtn,
			EmptyData,
			HansTabbar
		},
		data() {
			return {
				list: [],
				booktime:0,
			};
		},
		computed: {
			hasArean() {
				return this.list.length !== 0
			}
		},
		onLoad() {
			this.getBooktime()
		},
		methods: {
			toBookDetail(id) {
				const date = this.activeDay
				const booktime = this.booktime
				uni.navigateTo({
					url: `/pages/arena-detail/arena-detail?id=${id}&booktime=${booktime}&` + objectToQuerystring(date)
				})
			},
			getBooktime() {
				arenaApi.booktime().then(res => {
					this.booktime = res.data
				})
			},
			
			getList(year, month, date) {
				console.log('getList:', year, month, date)
				arenaApi.list({
					year,
					month,
					date
				}).then(res => {
					this.list = res.data
					console.log(this.list)
				})
			},
			/*分享当前页面*/
			onShareAppMessage() {
				let self = this;
				return {
					title: '恩平市体育馆',
					path: '/pages/index/index'
				};
			},
			onShareTimeline(){
				return {
				  title: "恩平市体育馆",
				  path: `/pages/index/index`
				 }
			}
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/var.scss';

.page-book-arena{
	.scroll-content{
		height: 200rpx;
	}
	.book-date-list{
		display: flex;
		white-space: nowrap;
		box-sizing: border-box;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		
		/deep/.uni-scroll-view::-webkit-scrollbar {
			display: none
		}
	}
	.arena-list{
		font-family: $font-family;
		width: 100%;
		box-sizing: border-box;
		padding: 28rpx 18rpx;
		.arena-item{
			margin-bottom: 40rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 14rpx 28rpx 28rpx;
			border-radius: 5px;
			box-shadow: $box-shadow;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.arena-info{
				.arena-name{
					font-size: 16px;
					font-weight: bold;
				}
				
				.arena-data{
					margin-top: 16rpx;
					font-size: 14px;
				}
			}
			
			
		}
		.reach-bottom-tip{
			color: #5E657D;
			font-size: 14px;
			text-align: center;
			margin-top: 16rpx;
		}
	}
}
</style>
